import lineIcon from './../../../public/line.svg';
import styles from './index.module.less';
import { Context } from '../../core/Context';
import { useCallback, useContext, useMemo } from 'react';
import { DrawType } from './config';

const Tool = () => {
  const { workspace, canvas, drawMode, setState } = useContext(Context);

  // const disabledPen = useMemo(() => {
  //   if (!workspace || !workspace.workspace) return true;
  //   return type === PageType.view;
  // }, [workspace, workspace?.workspace]);

  const stop = () => {
    if (!workspace) {
      return;
    }

    setState({ drawMode: '' });
    workspace.drawLine.stop();
  };

  const drawPenceil = useCallback((type: string) => {
    if (!workspace) {
      return;
    }

    if (drawMode === type) {
      stop();
    } else {
      workspace.drawLine.start(type, () => {
        setState({ drawMode: '' });
      });
      setState({ drawMode: type });
    }
  }, [ workspace, drawMode ]);

  const handlerDraw = () => {
    // if (!workspace || !canvas || disabledPen) return;
    if (!workspace || !canvas) return;

    drawPenceil(DrawType.straightLine);
  };

  return (
    <div className={styles.tool}>
      <img onClick={handlerDraw} className={styles.icon} src={lineIcon} />
    </div>
  );
};

export default Tool;